import React, { Component } from 'react'
const ThemeContext = React.createContext()
const ColorContext = React.createContext()
ThemeContext.displayName = 'ThemeContext'
ColorContext.displayName = 'ColorContext'

const Third = () => {
  return (
    <>
      <ThemeContext.Consumer>
        {
          (themeVal) => {
            return (
              <div>
                <ColorContext.Consumer>
                  {
                    (colorVal) => {
                      return (
                        <div>
                          theme: { themeVal }
                          <hr />
                          color: { colorVal }
                        </div>
                      )
                    }
                  }
                </ColorContext.Consumer>
              </div>
            )
          }
        }
      </ThemeContext.Consumer>
    </>
  )
}


class Second extends Component {
  render() {
    return (
      <div>
        <Third/>
      </div>
    )
  }
}
export default class App extends Component {
  state = {
    theme: 'dark',
    color: '#f66'
  }
  render() {
    return (
      <ThemeContext.Provider value = { this.state.theme }>
        <ColorContext.Provider value = { this.state.color }>
          <div>
            <button onClick = {
              () => {
                this.setState({
                  theme: this.state.theme === 'dark' ? 'light': 'dark'
                })
              }
            }>切换主题</button>
            <input type="color" value={ this.state.color } onChange = { (e) => {
              this.setState({
                color: e.target.value
              })
            }}/>
            <Second theme = { this.state.theme }/>
          </div>
        </ColorContext.Provider>
      </ThemeContext.Provider>
    )
  }
}
